<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <script>
        window.onload = function(){
            new Vue({
                el: "#d1",   // vue的作用范围
                data: { // 数据仓库,用于定义数据
                    msg: "Hello Vue"
                }
            })
        }
    </script>
</head>
<body>
    <div id="d1">
        <!-- 两队大括号{{ key }}表示插值表达式,用于进行数据的展示 -->
        <span id="s1">{{ msg }}</span><br>
        <!-- v-model是Vue的一个指令,用于进行双向数据绑定 -->
        <input type="text" id="inText" v-model="msg">
    </div>
    <div id="d2">
        <span id="s1">{{ msg }}</span><br>
        <input type="text" id="inText" v-model="msg">
    </div>
</body>
</html>